<template>
  <BasicDrawer
    v-bind="$attrs"
    title="预览"
    cancelText="关闭"
    :showOkBtn="false"
    showFooter
    @register="packageRegister"
    :closable="false"
    isDetail
  >
    <div class="drawer-package">
      <div class="package-header">
        <div class="header-img">
          <a-image height="100%" :src="drawerInfo.record.packageIconKey" />
        </div>
        <div class="header-content">
          <div class="content-title">{{ drawerInfo.record.packageName }}</div>
          <div class="content-desc">{{ drawerInfo.record.packageDesc }}</div>
          <div class="content-price">
            价格
            <div class="price-unit">¥</div>
            <a-statistic
              :value="drawerInfo.record.unitPrice"
              :precision="2"
              :value-style="{ color: '#C72A2A', fontWeight: '600' }"
            />
          </div>
          <div class="content-box">
            <div class="box-label">使用时间</div>
            <div class="box-day">{{ drawerInfo.record.serviceDays }}天</div>
          </div>
        </div>
      </div>
      <div class="package-detail">
        <div class="global-drawer-title">产品详情</div>
        <div class="detail-content" v-html="drawerInfo.record.packageDetail"></div>
      </div>
    </div>
  </BasicDrawer>
</template>

<script lang="ts" setup>
import { reactive, ref, computed, unref, createVNode } from 'vue'
import { BasicDrawer, useDrawerInner } from '@/components/Drawer'
import { message, Modal } from 'ant-design-vue'
import { cloneDeep } from 'lodash-es'

const emit = defineEmits(['register'])

const drawerInfo = reactive<any>({
  record: {}
})

const [packageRegister, { closeDrawer, changeOkLoading, changeLoading }] = useDrawerInner(async (data) => {
  drawerInfo.record = cloneDeep(data.record) || {}
})
</script>

<style lang="less" scoped>
.drawer-package {
  width: 900px;
  margin: 0 auto;
  padding: 24px 0;
  color: #192235;
  .package-header {
    display: flex;
    align-items: flex-start;
    .header-img {
      width: 280px;
      height: 174px;
      margin-right: 24px;
      flex-shrink: 0;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .header-content {
      flex: 1;
      padding-top: 16px;
      font-size: 12px;
      .content-title {
        font-size: 16px;
        font-weight: 600;
        padding-bottom: 16px;
        margin-bottom: 24px;
        border-bottom: 1px solid #e0e1e6;
      }
      .content-desc {
        color: #565c6e;
        line-height: 18px;
        margin-bottom: 16px;
      }
      .content-price {
        padding: 3px 20px 7px;
        margin-bottom: 18px;
        background: #fafafa;
        border-radius: 4px;
        font-size: 14px;
        color: #565c6e;
        display: flex;
        align-items: baseline;
        .price-unit {
          color: #c72a2a;
          margin-left: 6px;
          margin-right: 2px;
        }
      }
      .content-box {
        margin-bottom: 16px;
        display: flex;
        align-items: center;
        &:last-child {
          margin-bottom: 24px;
        }
        .box-label {
          font-size: 12px;
          font-weight: 600;
          color: #192236;
          line-height: 22px;
          margin-right: 8px;
        }
        .box-day {
          height: 24px;
          line-height: 24px;
          padding: 0 12px;
          font-size: 14px;
          color: @primary-color;
          border: 1px solid @primary-color;
        }
      }
      .content-btn {
        margin-bottom: 40px;
        padding-top: 24px;
        border-top: 1px solid #e0e1e6;
        display: flex;
        align-items: center;
      }
      .content-contact {
        margin-bottom: 40px;
        margin-top: 16px;
      }
    }
  }
  .package-detail {
    :deep(.detail-content) {
      margin-top: 24px;
      img {
        max-width: 100%;
      }
    }
  }
}
</style>
